<!--个性设置-->
<template>
  <div class="desktop-personal">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-icon-test" />
        </div>
        <span>个性设置</span>
      </div>
      <!-- 个性设置表格 -->
      <el-table
        :data="desktopTableData"
        highlight-current-row
        border
        height="100%"
        :row-style="{height:'40px'}"
        :cell-style="{padding:'0px'}"
        :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
        style="width: 100%">
        <el-table-column
          label="顺序号"
          prop="MS_Order"
          show-overflow-tooltip
          sortable>
        </el-table-column>
        <el-table-column
          label="是否显示"
          prop="MS_IsShow"
          show-overflow-tooltip
          sortable>
          <template slot-scope="scope">
            <a-checkbox :checked="scope.row.MS_IsShow"></a-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          label="模块名称"
          prop="MS_ModuleName"
          show-overflow-tooltip
          sortable>
        </el-table-column>
        <el-table-column
          label="记录时间"
          prop="MS_CreateDate"
          show-overflow-tooltip
          sortable>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a @click="tableEnable(scope.row)">{{ scope.row.MS_IsShow ? '禁用' : '启用' }}</a>
          </template>
        </el-table-column>
      </el-table>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'DesktopPersonal',
  components: {
  },
  data () {
    return {
      desktopTableData: [ // 个性设置表格数据
        {
          MS_Order: '1',
          MS_IsShow: false,
          MS_ModuleName: '新闻管理',
          MS_CreateDate: '2020-09-18'
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    tableEnable (row) {
      this.desktopTableData[0].MS_IsShow = !this.desktopTableData[0].MS_IsShow
    }
  }
}
</script>
<style lang="less" scoped>
.desktop-personal {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  /deep/ .ant-card {
    .ant-card-head-title {
      padding: 6px 0 !important;
    }
  }
}
</style>
